<template>
    <div>
        <v-Header title="充值详情"></v-Header>
        <v-panel title="充值账号">
            <v-input title="姓名" value="天宇" disabled></v-input>
            <v-input title="开户行" value="中国工商银行" disabled></v-input>
            <v-input title="银行卡号" value="6222081803000628209" disabled></v-input>
        </v-panel>
        <v-panel title="充值详情">
            <v-input title="金额" value="1000"></v-input>
            <v-input title="日期" :value="date" disabled></v-input>
            <v-input title="时间" :value="dateTime" disabled></v-input>
        </v-panel>
        <div class="btn">
            <input-button text='充值' color='#fb7d3f' @click.native="chongZhi"></input-button>
            <input-button text='解绑银行卡' @click.native="jieBang"></input-button>
        </div>

    </div>
</template>

<script>
import vHeader from "../../Common/vHeader";
import vPanel from "../../Common/vPanel";
import vInput from "../../Common/vInput";
import InputButton from "../../Common/InputButton";
export default {
  components: {
    vHeader,
    vPanel,
    vInput,
    InputButton
  },
  computed: {
      date() {
        //   console.log(vdate.formatDate(new Date(),'yyyy-MM-dd hh:mm'));
          
          return new Date().toLocaleDateString("zh-CN-u-hc-h24");
      },
      dateTime() {
        //   console.log(vdate.formatDate(new Date(),'yyyy-MM-dd hh:mm'));
          
          return new Date().toLocaleTimeString("zh-CN-u-hc-h24");
      },
  },
  methods: {
      chongZhi() {
          this.$toast("充值失败！");
      },
      jieBang() {
          this.$toast("暂不支持！");
          this.$router.push('/User/BangDing');
      },
  },
};
</script>

<style scoped>
.btn{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 8vh;
}
</style>